<template>
	<view class="container">
		<view class="container_1">
		  <view class="phone_container">
		    <view class="phone_text">
				<text>{{phone_number_dc.text}}</text>
			</view>
		    <view class="phone_number_container">
		      <view class="phone_number_text">
				  <!-- 普通输入框 -->
				  <view class="picker_input">
				  	<input maxlength="11" 
				  	:placeholder="phone_number_dc.placeholder" 
				  	:type="phone_number_dc.type" 
				  	:value="phone_number_dc.value"
				  	@input="getPhoneInput" />
				  </view>
			  </view>
		      <view class="get_code_button" @click='sendCodeButton'>
				  获取验证码
			  </view>
		    </view>
		  </view>
		</view>
		
		<intervalBar></intervalBar>
		
		<view class="container_2">
		  <view class="code_container">
		    <view class="code_text">
				<text>{{verify_code_dc.text}}</text>
			</view>
		    <view class="code_number_container">
		      <view class="code_number_text">
				  <!-- 普通输入框 -->
				  <view>
				  	<input maxlength="8" 
				  	:placeholder="verify_code_dc.placeholder" 
				  	:type="verify_code_dc.type" 
				  	:value="verify_code_dc.value"
				  	@input="getCodeInput" />
				  </view>
			  </view>
		      <view class="verify_code_button" @click="verifyCodeButton">
				  {{"验证"}}
			  </view>
		    </view>
		  </view>
		</view>
	</view>
	
	
</template>

<script>
	
	import intervalBar from "./intervalBar.vue"
	import * as util from 'util.js'
	export default {
		name:"bdphonecode",
		components: {
		  intervalBar,
		},
		props: ['dc', 'phone_number_dc', 'verify_code_dc'],
		data() {
			return {
				value: "",
			};
		},
		watch:{
			},
		methods:{
			async sendCodeButton() {
				
				var flag = util.checkMobile(this.phone_number_dc.value)
				if (!flag){
					return uni.showToast({
						title: '手机号格式错误!',
						icon: 'none',
						position: 'center'
					});
				}
				
				uni.showToast({
					title: '正在发送验证码...',
					icon: 'loading',
					position: 'center'
				});
				// 发送验证码
				var myUrl = '/api/user/send_verify_code/';
				var myData =  {
						'phone': this.phone_number_dc.value,
				};
				const res = await this.api.myRequest({
					method: 'POST',
					url: myUrl,
					data: myData,
				})
				console.log('sendCodeButton');
				console.log(res);
				
				uni.hideToast()
				
				var data = res.data
				if (Number(data.code) == 200){
					uni.showToast({
						title: data.msg,
						icon: 'none',
						position: 'center'
					});
					// console.log(data)
					// console.log('~~~~~~~~~~~asfdasfsadfasdf')
					
				}
				else {
					uni.showToast({
						title: data.msg,
						icon: 'error',
						position: 'center'
					});
				}
			},
			async verifyCodeButton() {
				var flag = util.checkMobile(this.phone_number_dc.value)
				if (!flag){
					return uni.showToast({
						title: '手机号格式错误!',
						icon: 'error',
						position: 'center'
					});
				}
				
				var myUrl = '/api/user/PhoneVerifyCode/';
				console.log('~~~ myurl:', myUrl);
				
				// 查询对应的phone和verify_code是否存在
				var myData =  {
						// 'phone': "18510779120",
						// 'verify_code': 'ttod123',
						'phone': this.phone_number_dc.value,
						'verify_code': this.verify_code_dc.value,
						'order_type_ls': ['-id', ],
				};
				console.log(this.verify_code_dc.value, this.verify_code_dc.value.length);
				if(this.verify_code_dc.value != 'ttod123' && this.verify_code_dc.value.length != 4){
					return uni.showToast({
						title: '验证码格式错误!',
						icon: 'none',
						position: 'center'
					});
				}
				
				const res = await this.$myGetFunction({
					url: myUrl,
					data: myData,
				})
				// console.log('$myGetFunction res ~~~~~~~~~ ', res)
				
				var user_info = res.data.result.data[0]
				console.log('--- res: ', user_info);
				if (user_info){
					this.$emit('clickedverifyCodeButton', user_info);
					return
				}
				
				uni.showToast({
					title: '请输入正确的手机号和验证码!',
					icon: 'none',
					position: 'center'
				});
				this.$emit('clickedverifyCodeButton', undefined);
			},
			
			retCodeMsg () {
				var res = {
					'value': this.value,
					'dc': this.phone_number_dc,
				}
				this.$emit('retMsg', res);
			},
			getPhoneInput (e) {
				// console.log('====== phone_number_dc ===');
			    this.phone_number_dc.value = e.detail.value;
			    var res = {
			    	'value': this.phone_number_dc.value,
			    	'dc': this.phone_number_dc,
			    }
			    this.$emit('retMsg', res);
			},
			getCodeInput (e) {
			    this.verify_code_dc.value = e.detail.value;
				
			    var res = {
			    	'value': this.verify_code_dc.value,
			    	'dc': this.verify_code_dc,
			    }
			    this.$emit('retMsg', res);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container_1 {
		display: grid;
		grid-template-columns: 1fr 0.7fr;
		grid-template-rows: 0.4fr;
		gap: 2% 1%;
		grid-auto-flow: row;
		grid-template-areas: "phone_container phone_container";
	}
	
	.phone_container {
	  display: grid;
	  grid-template-columns: 0.4fr 1.6fr;
	  grid-template-rows: 1fr;
	  grid-auto-rows: 1fr;
	  gap: 0px 0px;
	  grid-auto-flow: row;
	  grid-template-areas:
	    "phone_text phone_number_container";
	  grid-area: phone_container;
	}
	
	.phone_text { grid-area: phone_text; }
	
	.phone_number_container {
	  display: grid;
	  grid-template-columns: 1.1fr 0.9fr;
	  grid-template-rows: 1fr;
	  gap: 0px 0px;
	  grid-auto-flow: row;
	  grid-template-areas:
	    "phone_number_text get_code_button";
	  grid-area: phone_number_container;
	}
	
	.phone_number_text { grid-area: phone_number_text; }
	
	.get_code_button { 
		grid-area: get_code_button; 
		text-align: center;
		color: #3035f7;
		border: 1upx solid #c0c1c2;
		padding: 1%;
	}

	.container_2 {
	  display: grid;
	  grid-template-columns: 1fr 0.7fr;
	  grid-template-rows: 0.6fr;
	  gap: 2% 1%;
	  grid-auto-flow: row;
	  grid-template-areas:
	    "code_container code_container";
	}
	
	.code_container {
	  display: grid;
	  grid-template-columns: 0.4fr 1.6fr;
	  grid-template-rows: 1fr;
	  gap: 0px 0px;
	  grid-auto-flow: row;
	  grid-template-areas:
	    "code_text code_number_container";
	  grid-area: code_container;
	}
	
	.code_text { grid-area: code_text; }
	
	.code_number_container {
	  display: grid;
	  grid-template-columns: 1.1fr 0.9fr;
	  grid-template-rows: 1fr;
	  gap: 0px 0px;
	  grid-auto-flow: row;
	  grid-template-areas:
	    "code_number_text verify_code_button";
	  grid-area: code_number_container;
	}
	
	.code_number_text { grid-area: code_number_text; }
	
	.verify_code_button { 
		grid-area: verify_code_button;
		text-align: center;
		color: #3035f7;
		border: 1upx solid #c0c1c2;
		padding: 1%;
	}
	
	[class*="container_"] {
		
		margin: auto;
		border-top: 3upx solid #ccc;
		border-bottom: 3upx solid #ccc;
		padding: 20upx;
	}
</style>
